<template>
  <div class="demo-box">
    <p>支持：{{ supNum }}</p>
    <p>反对：{{ oppNum }}</p>
    <p ref="ratioBox">支持率：{{ ratio }}</p>
    <div>
      <button @click="change('sup')">支持</button>
      <button @click="change('opp')">反对</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo-one",
  data() {
    return {
      supNum: 10,
      oppNum: 5,
    };
  },
  methods: {
    change(type) {
      if (type === "sup") {
        this.supNum++;
        this.$nextTick(() => {
          console.log("支持数累加");
        });
        console.log("OK");
        return;
      }
      this.oppNum++;
    },
  },
  computed: {
    ratio() {
      let { supNum, oppNum } = this,
        total = supNum + oppNum;
      return total === 0 ? "--" : ((supNum / total) * 100).toFixed(2) + "%";
    },
  },
  updated() {
    console.log("视图更新完毕");
  },
  mounted() {
    // console.log(this.$refs);
  },
};
</script>

<style lang="less" scoped>
.demo-box {
  color: red;
}
</style>